<template>
    <div>
        <Modal v-model="isShowModal" title="推广明细" @on-cancel="hide()" :mask-closable="false" width="950">

            <!--表格数据-->
            <Table :columns="columns" :data="data" size="small" :stripe="true" :max-height="650">
                <template slot-scope="{ row, index }" slot="level">
                    <span v-if="row.level == 0">普通用户</span>
                    <span v-if="row.level == 1">体验员</span>
                    <span v-if="row.level == 2">销售经理</span>
                    <span v-if="row.level == 3">销售总监</span>
                    <span v-if="row.level == 4">董事</span>
                </template>

                <template slot-scope="{ row, index }" slot="hierarchy">
                    <span v-if="row.hierarchy == 1">直推用户</span>
                    <span v-if="row.hierarchy == 2">间推用户</span>
                </template>

                <template slot-scope="{ row, index }" slot="ratio">
                    <span>{{row.ratio * 100}}%</span>
                </template>

            </Table>

            <!-- 重写对话框底部按钮 -->
            <div slot="footer">
                <Button @click="hide()">取消</Button>
                <Button type="primary" @click="hide()">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "order-promotion-detail",
        data() {
            return {
                isShowModal: false,

                columns: [
                    {
                        title: '用户昵称',
                        minWidth: 120,
                        key: 'nickName'
                    },
                    {
                        title: '用户账号',
                        minWidth: 120,
                        key: 'username'
                    },
                    {
                        title: '用户等级',
                        minWidth: 180,
                        slot: 'level'
                    },
                    {
                        title: '推广关系',
                        slot: 'hierarchy',
                        width: 150
                    },
                    {
                        title: '分佣比率',
                        minWidth: 120,
                        slot: 'ratio'
                    },
                    {
                        title: '分佣金额（元）',
                        minWidth: 120,
                        key: 'amount'
                    }
                ],
                data: []
            }
        },
        methods: {
            // 显示模态框
            show(row) {
                this.isShowModal = true;
                if (row.promoteBonus) {
                    this.data = JSON.parse(row.promoteBonus);
                }
            },
            // 关闭模态框
            hide() {
                this.isShowModal = false;
            }
        }
    }
</script>

<style scoped>

</style>